import React, { ReactNode } from "react";

import WrongItem from "./WrongItem";
import DefaultItem from "./DefaultItem";
import Item from "./Item";

import type { BaseItemType, ItemComponent } from "../type";

export default function Row({
  row,
  isLastRow,
  columns,
  columnGap,
  labelWidth,
  namespace,
  emptyValueText,
}: {
  emptyValueText?: React.ReactNode;
  row: Array<BaseItemType>;
  isLastRow: boolean;
  columns: number;
  columnGap: number;
  labelWidth?: number;
  namespace?: Record<string, any>;
}) {
  const labelStyle = labelWidth ? { width: labelWidth + "px" } : undefined;
  const rowStyle = {
    gridColumnGap: `${columnGap}px`,
    gridTemplateColumns: `repeat(${columns},1fr)`,
  };

  return (
    <div className="ct0-description-row" style={rowStyle}>
      {row.map((item, index) => {
        let C: ItemComponent;

        if (item.type) C = namespace?.[item.type];
        else C = DefaultItem;

        if (!C) return <WrongItem key={index} item={item} />;

        return (
          <Item
            key={index}
            item={item}
            style={labelStyle}
            columns={columns}
            component={C}
            rowCount={row.length}
            isLast={isLastRow && index == row.length - 1}
            emptyValueText={emptyValueText}
          />
        );
      })}
    </div>
  );
}
